* {
    margin: 0;
    padding: 0;
}

ul {
    margin: 200px auto;
    width: 200px;
    height: 200px;
    list-style: none;
    position: relative;
    transform-style: preserve-3d;
    /* transform: rotateX(20deg) rotateY(20deg); */
}

li {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
}

.one {
    transform: translate3d(0, 0, -173px);
}

.two {
    transform: translate3d(-150px, 0, -86.5px) rotateY(60deg);
}

.three {
    transform: translate3d(150px, 0, -86.5px) rotateY(-60deg);
}

.four {
    transform: translate3d(150px, 0, 86.5px) rotateY(60deg);
}

.five {
    transform: translate3d(-150px, 0, 86.5px) rotateY(-60deg);
}

.six {
    transform: translate3d(0, 0, 173px);
}


img {
    width: 100%;
    height: 100%;
}